import { Outlet, useLoaderData } from 'react-router-dom'
import styles from './style.module.scss'

import CategoryItem from '@renderer/components/CategoryItem'
import FooterMenu from '@renderer/components/FooterMenu'
import QuickNav from '@renderer/components/QuickNav'

const Category = () => {
  const categories = useLoaderData() as CategoryType[]

  return (
    <main className={styles.root}>
      <div className="categories">
        <QuickNav></QuickNav>
        {categories.map((category) => (
          <CategoryItem key={category.id} category={category}></CategoryItem>
        ))}
      </div>
      <FooterMenu></FooterMenu>
      <div className="content">
        <Outlet></Outlet>
      </div>
    </main>
  )
}

export default Category
